import type { ViewChartBarProps } from './type.d'
import { CHART } from '@/constant'
import type { DesignStore } from '@/types'

export const DEFAULT_DATASET = {
  dimensions: [
    'category',
    {
      name: 'value',
      displayName: '消耗值',
    },
  ], // 定义维度名称
  source: [
    { category: '水', value: 30 },
    { category: '电', value: 10 },
    { category: '煤', value: 15 },
    { category: '气', value: 23 },
    { category: '油', value: 43 },
    { category: '热', value: 13 },
  ],
}

export const DEFAULT_OPTION = {
  title: CHART.defaultTitle,
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'shadow',
      label: {
        show: false,
        backgroundColor: '#9ec6d7',
      },
    },
  },
  color: CHART.color,
  grid: CHART.defaultGrid,
  // legend: {
  //   show: true,
  //   textStyle: {
  //     color: '#9ec6d7',
  //     fontSize: 10
  //   }
  // },
}

export function createOptionSeries(): any {
  // const { source } = dataset;
  // const handler = [...source];
  const linearGradient = CHART.linearGradient('asc')

  return {
    type: 'bar',
    seriesLayoutBy: 'row',
    label: {
      show: true,
      position: 'top', // 位置
      color: ({ dataIndex }: any) => {
        // 对每个bar显示一种颜色
        return CHART.color[dataIndex]
      },
      fontSize: 20,
      fontWeight: 'bold', // 加粗
      distance: 5, // 距离
    }, // 柱子上方的数值
    itemStyle: {
      borderRadius: [8, 8, 0, 0],
      color: ({ dataIndex }: any) => {
        // 对每个bar显示一种颜色
        return linearGradient[dataIndex]
      },
    },
  }
}
function createYAxis(theme: DesignStore['theme']) {
  return {
    type: 'value',
    axistick: {
      show: false,
    },
    axisLine: {
      show: false,
      lineStyle: {},
    },
    axisLabel: {
      textStyle: {},
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  }
}
function createXAxis(theme: DesignStore['theme']) {
  return {
    type: 'category',
    axisLine: {
      show: false,
      lineStyle: {},
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      textStyle: {},
    },
  }
}

export function createOptions(props: ViewChartBarProps, theme: DesignStore['theme']) {
  return {
    ...DEFAULT_OPTION,
    series: createOptionSeries(),
    yAxis: createYAxis(theme),
    xAxis: createXAxis(theme),
    ...props.option,
    legend: {
      ...CHART.createLegend(
        props.legend ? props.legendPosition : false,
        theme,
      ),
      ...props.option?.legend,
    },
    dataset: props.dataset,
  }
}
